<template>
	<div>
		<el-input :class="light ? ' i-table-input i-input-light ' : 'i-table-input'"  v-model="input"  size="mini" @focus="handleFocus" @blur="handleBlur" />
	</div>
</template>
<script type="text/javascript">
	//通过命名空间的方式映入
	import { createNamespacedHelpers } from 'vuex'
	//获取需要管理的方法
	const { mapState, mapActions, mapMutations } = createNamespacedHelpers('synthesize')
	export default {
		data(){
			return {
				state:false,
				input:'',

				light:false,
			}
		},
		inject:['field_key'],
		props:{
			value:[String,Number],
			params:[Array],
			field:String,
			data:[Object,Array],
			index:Number
		},
		computed:{
			...mapState(['tableData'])
		},
		created(){
			this.input = this.value;
		},
		mounted(){

		},
		methods:{
			...mapActions(['editTableData']),
			...mapMutations(['fixTableData']),

			/**
			 * 获得焦点
			 * @return {[type]} [description]
			 */
			handleFocus(){
				this.light = true;
			},

			/**
			 * 失去焦点
			 * @return {[type]} [description]
			 */
			handleBlur(){

				/**
				 * 调用VUEX.fixTableData 方法   修改单个数据
				 * @key  			{ String }  表格唯一码
				 * @index			{ Number }  表格行下标
				 * @field           { String }  表格内单个字段名
				 * @value			{ Number String}    修改后数据
				 * @type {[type]}
				 */
				this.fixTableData({key:this.field_key,index:this.index,field:this.field,value:this.input})

				/**
				 * 关闭修改状态高亮
				 * @type {Boolean}
				 */
				this.light = false;
			}

		}
	}
</script>
<style type="text/css" lang="scss">
	
</style>